<template>
  <div class="layout">
    <Header class="layout-header-bar"></Header>
    <Row>
      <div style="width: 120px;height: 520px;background:white;margin: 20px 10px;text-align: center">
        <Menu style="width: 120px;">
          <MenuItem name="1" :to="{path: '/sp-logistics/sp-transport-info/sp-transport-info-1',query:{id: id}}">基本信息</MenuItem>
          <hr>
          <MenuItem name="2" :to="{path: '/sp-logistics/sp-transport-info/sp-transport-info-2',query:{id: id}}">任务轨迹</MenuItem>
          <hr>
          <MenuItem name="3" :to="{path: '/sp-logistics/sp-transport-info/sp-transport-info-3',query:{id: id}}">运单详情</MenuItem>
          <hr>
          <MenuItem name="4" :to="{path: '/sp-logistics/sp-transport-info/sp-transport-info-4',query:{id: id}}">交付照片</MenuItem>
          <hr>
          <MenuItem name="5" :to="{path: '/sp-logistics/sp-transport-info/sp-transport-info-5',query:{id: id}}">提货照片</MenuItem>
          <hr>
        </Menu>
        <Button style="margin-top: 180px;width: 80px" type="error" to="/sp-logistics/sp-transport">返回</Button>
      </div>
      <Content :style="{margin: '20px 10px', background: '#fff', minHeight: '520px'}">
        <router-view />
      </Content>
    </Row>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        id: this.$route.query.id
      }
    },
    created(){
      // console.log(this.$route.query.id)
    }
  }
</script>

<style scoped>
.layout{
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin-top: -20px;
}
.layout-header-bar{
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

</style>
